<!-- 分类参数 -->
<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="card">
        <el-tree :data="catList.result" :props="defaultProps"></el-tree>
            <div class="div-el-pagination">
              <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              @prev-click="handlePrevChange"
              @next-click="handleNextChange"
              :current-page="queryInfo.pagenum"
              :page-sizes="[20,30,40]"
              :page-size="queryInfo.pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="catList.total">
              </el-pagination>
            </div>
    </el-card>
  </div>
</template>

<script>
export default {
  created () {
    this.getCategories()
  },
  data () {
    return {
      queryInfo: {
        query: '',
        pagenum: 1,
        pagesize: 20
      },
      dialogAddVisible: false,
      catList: {},
      defaultProps: {
        children: 'children',
        label: 'cat_name'
      }
    }
  },
  methods: {
    async getCategories () {
      const gParams = {
        url: '/categories',
        params: this.queryInfo
      }
      const res = await this.$send(gParams)
      if (res.meta.status === 200) {
        this.catList = res.data
        this.total = res.total
      }
    },
    getQueryAboutList() {
      this.getCategories()
    },
    handleCurrentChange(curPage) {
      this.queryInfo.pagenum = curPage
      this.getCategories()
    },
    handleSizeChange(pagesize) {
      this.queryInfo.pagesize = pagesize
      this.getCategories()
    },
    handlePrevChange(curPage) {
      this.queryInfo.pagenum = curPage
      this.getCategories()
    },
    handleNextChange(curPage) {
      this.queryInfo.pagenum = curPage
      this.getCategories()
    }
  }
}

</script>
<style lang='less' scoped>
</style>
